{extend name='admin@main'}

{block name="content"}
<form class="layui-form layui-card" onsubmit="return false;" action="{:request()->url()}" data-auto="true" method="post"
      autocomplete="off">
    <div class="layui-card-body">
        <div class="layui-form-item">
            <label class="layui-form-label">活动类型</label>
            <div class="layui-inline" >
                {foreach $typeData as $key => $type}
                {if isset($vo.type) and in_array($key ,$vo.type)}
                <input type="checkbox" name="type[]" title="{$type.name}" value="{$key}"checked>
                {else}
                <input type="checkbox" name="type[]" title="{$type.name}" value="{$key}">
                {/if}
                {/foreach}
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">活动名称</label>
            <div class="layui-input-block label-required">
                <input name="name" value='{$vo.name|default=""}' required placeholder="请输入活动名称" class="layui-input">
                <!--{/if}-->
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">展示价格</label>
            <div class="layui-input-block label-required">
                <input name="show_price" value='{$vo.show_price|default=""}' required placeholder="请输入展示价格"
                       class="layui-input">
                <!--{/if}-->
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">赛事简介</label>
            <div class="layui-input-block label-required">
                <input name="desc" value='{$vo.desc|default=""}' required placeholder="请输入赛事简介" class="layui-input">
                <!--{/if}-->
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">活动人数</label>
            <div class="layui-input-block label-required">
                <input name="count" type="number" value='{$vo.count|default=""}' required placeholder="请输入活动人数（-1 为不限制）"
                       class="layui-input">
                <!--{/if}-->
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">活动图片</label>
            <div class="layui-input-block label-required">
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th class="text-center">LOGO</th>
                        <th class="text-left">活动图片</th>
                    </tr>
                    <tr>
                        <td width="90px" class="text-center"><input name="pic" type="hidden"
                                                                    value="{$vo.pic|default=''}"></td>
                        <td width="auto" class="text-left"><input name="image" type="hidden"
                                                                  value="{$vo.image|default=''}"></td>
                    </tr>
                    </thead>
                    <span style="color: red">LOGO默认比列：250x110</span>
                </table>
            </div>
            <script>$('[name="pic"]').uploadOneImage(), $('[name="image"]').uploadMultipleImage()</script>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">报名开始日期</label>
            <div class="layui-input-block">
                <input data-date-one name="apply_start_time" value="{$vo.apply_start_time|default=''}" required
                       placeholder="请选择报名日期" class="layui-input">
            </div>
            <label class="layui-form-label">报名结束日期</label>
            <div class="layui-input-block">
                <input data-date-one name="apply_end_time" value="{$vo.apply_end_time|default=''}" required
                       placeholder="请选择报名日期" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">活动开始日期</label>
            <div class="layui-input-block">
                <input data-date-one name="start_time" value="{$vo.start_time|default=''}" required
                       placeholder="请选择活动开始日期" class="layui-input">
            </div>
            <label class="layui-form-label">活动结束日期</label>
            <div class="layui-input-block">
                <input data-date-one name="end_time" value="{$vo.end_time|default=''}" required placeholder="请选择活动开始日期"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">活动地点</label>
            <div class="layui-input-block">
                <input id="map_search" type="text" placeholder="输入您要定位的地址" value='{$vo.place|default=""}' name="place"
                       class="layui-input"/>
                <div id="map" style="height: 400px;"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">经度</label>
            <div class="layui-input-block">
                <input name="longitude" id="longitude" value='{$vo.longitude|default=""}' placeholder="经度"
                       class="layui-input">
                <!--{/if}-->
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">纬度</label>
            <div class="layui-input-block">
                <input name="latitude" id="latitude" value='{$vo.latitude|default=""}' placeholder="经度"
                       class="layui-input">
                <!--{/if}-->
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">城市</label>
            <div class="layui-input-block">
                <!--<input type="text" placeholder="输入城市" value='{$vo.city|default=""}' name="city" class="layui-input"/>-->
                <fieldset id="global_location">
                    <legend>全球主要国家城市</legend>
                    <p>
                        所在城市：
                        <select class="select120" id="country" name="country" lay-filter="country">
                        </select>
                        <select class="select120" id="province" name="province" lay-filter="province"></select>
                        <select class="select120" id="city" name="city" lay-filter="city"></select>
                    </p>
                </fieldset>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">注意事项</label>
            <div class="layui-input-block">
                <input name="note" value='{$vo.note|default=""}' placeholder="请输入注意事项" class="layui-input">
                <!--{/if}-->
            </div>
        </div>
        <div class="layui-form-item">
            <h3 class="color-green"><sup class='color-red font-s14 absolute' style="margin-left:-10px">*</sup>赛事详情</h3>
            <textarea name="content">{$vo.content|default=''|raw}</textarea>
        </div>
        <div class="layui-form-item">
            <h3 class="color-green"><sup class='color-red font-s14 absolute' style="margin-left:-10px">*</sup>组别详情</h3>
            <textarea name="group_content">{$vo.group_content|default=''|raw}</textarea>
        </div>
    </div>
    <div class="hr-line-dashed"></div>
    <div class="layui-form-item text-center">
        {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}
        <button class="layui-btn" type='submit'>保存数据</button>
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
    </div>
</form>

{/block}
{block name='script'}
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key={:config('apiKey.amapKey')}&callback=init"></script>
<script>
    window.form.render();
    $.vali('',function (res) {
        console.log(res)
    });
    require(['ckeditor', 'angular', 'area_cn', 'area_en'], function () {
            window.createEditor('[name="content"]', {height: 500});
            window.createEditor('[name="group_content"]', {height: 500});

            // 英文版时引用英文库
            function area_select(idPrefix, defaultValArr) {
                var idPrefix = idPrefix || '',
                    defaultValArr = defaultValArr || ["{$vo['country']|default='中国'}", "{$vo['province']|default='上海'}", "{$vo['city']|default='中国'}"];
                var countryDivId = idPrefix + "country", stateDivId = idPrefix + "province", cityDivId = idPrefix + "city";
                var countryDefault = defaultValArr[0], stateDefault = defaultValArr[1], cityDefault = defaultValArr[2];
                var countryList = gj.Location.CountryRegion;
                //注意事项
                //有的国家是没有state的只有city,有的没有state
                //2. 获取select，初始化
                var countrySelectObj = document.getElementById(countryDivId);
                var stateSelectObj = document.getElementById(stateDivId);
                var citySelectObj = document.getElementById(cityDivId);
                countrySelectObj.add(new Option("--请选择--", ""));
                stateSelectObj.add(new Option("--请选择--", ""));
                citySelectObj.add(new Option("--请选择--", ""));
                var xmlCountryNodes = countryList;
                for (var i = 0; i < xmlCountryNodes.length; i++) {
                    var xmlCountryName = xmlCountryNodes[i]['-Name'];
                    var xmlCountryCode = xmlCountryNodes[i]['-Code'];
                    countrySelectObj.add(new Option(xmlCountryName, xmlCountryName))
                }
                $($('#' + countryDivId).find("option")).each(function () {
                    if ($(this).text() == countryDefault) {
                        $(this).attr("selected", "selected")
                    }
                });
                var index1 = countrySelectObj.selectedIndex - 1;
                if (index1 < 0) {
                } else {
                    var xmlStateNodes = countryList[index1]['State'];
                    for (var j = 0; j < xmlStateNodes.length; j++) {
                        var xmlStateName = xmlStateNodes[j]['-Name'];
                        var xmlStateCode = xmlStateNodes[j]['-Code'];
                        stateSelectObj.add(new Option(xmlStateName, xmlStateName));
                        citySelectObj.length = 0
                        citySelectObj.add(new Option("--请选择--", ""))
                    }
                    $($('#' + stateDivId).find("option")).each(function () {
                        if ($(this).text() == stateDefault) {
                            $(this).attr("selected", "selected")
                        }
                    });
                }

                var index2 = stateSelectObj.selectedIndex - 1;
                if (index2 < 0) {
                } else {
                    var xmlCityNodes = xmlStateNodes[index2]['City'];
                    for (var k = 0; k < xmlCityNodes.length; k++) {
                        var xmlCityName = xmlCityNodes[k]['-Name'];
                        var xmlCityCode = xmlCityNodes[k]['-Code'];
                        citySelectObj.add(new Option(xmlCityName, xmlCityName))
                    }
                    $($('#' + cityDivId).find("option")).each(function () {
                        if ($(this).text() == cityDefault) {
                            $(this).attr("selected", "selected")
                        }
                    });
                }
                form.on('select(country)', function (data) {
                    stateSelectObj.length = 0;
                    stateSelectObj.add(new Option("--请选择--", ""));
                    if (this.value != "") {
                        for (var i = 0; i < countryList.length; i++) {
                            var xmlCountryCode = countryList[i]['-Name'];
                            this.value = data.value;
                            if (this.value == xmlCountryCode) {
                                if (countryList[i]['State']) {
                                    var xmlStateNodes = countryList[i]['State']
                                } else {
                                    var xmlStateNodes = {}
                                }
                                if (typeof xmlStateNodes === 'object' && !isNaN(xmlStateNodes.length)) {
                                    var fStateNodeName = xmlStateNodes[0]['-Name']
                                } else {
                                    var fStateNodeName = xmlStateNodes['-Name']
                                }
                                if (fStateNodeName == null) {
                                    stateSelectObj.length = 0;
                                    stateSelectObj.add(new Option("--", ""));
                                    if (xmlStateNodes['City']) {
                                        var xmlCityNodes = xmlStateNodes['City']
                                    } else {
                                        var xmlCityNodes = {}
                                    }
                                    if (typeof xmlStateNodes === 'object' && !isNaN(xmlStateNodes.length)) {
                                        var fStateNodeName = xmlStateNodes[0]['-Name']
                                    } else {
                                        var fStateNodeName = xmlStateNodes['-Name']
                                    }
                                    citySelectObj.length = 0;
                                    if (xmlCityNodes.length > 0) {
                                        for (var l = 0; l < xmlCityNodes.length; l++) {
                                            var xmlcityName = xmlCityNodes[l]['-Name'];
                                            var xmlcityCode = xmlCityNodes[l]['-Code'];
                                            citySelectObj.add(new Option(xmlcityName, xmlcityName))
                                        }
                                    } else {
                                        citySelectObj.add(new Option("--", ""))
                                    }

                                } else {
                                    for (var j = 0; j < xmlStateNodes.length; j++) {
                                        var xmlStateName = xmlStateNodes[j]['-Name'];
                                        var xmlStateCode = xmlStateNodes[j]['-Code'];
                                        stateSelectObj.add(new Option(xmlStateName, xmlStateName));
                                        citySelectObj.length = 0
                                        citySelectObj.add(new Option("--请选择--", ""))
                                    }
                                }
                                break
                            }
                        }
                    }
                    form.render(); //刷新select选择框渲染
                });
                form.on('select(province)', function (data) {
                    citySelectObj.length = 0;
                    citySelectObj.add(new Option("--请选择--", ""));
                    this.value = data.value;
                    if (this.value != "") {
                        for (var i = 0; i < xmlCountryNodes.length; i++) {
                            var xmlCountryCode = xmlCountryNodes[i]['-Name'];
                            if (countrySelectObj.value == xmlCountryCode) {
                                var xmlStateNodes = xmlCountryNodes[i]['State'];
                                for (var j = 0; j < xmlStateNodes.length; j++) {
                                    if (stateSelectObj.value == xmlStateNodes[j]['-Name']) {
                                        var xmlCityNodes = xmlStateNodes[j]['City'];
                                        for (var k = 0; k < xmlCityNodes.length; k++) {
                                            var xmlCityName = xmlCityNodes[k]['-Name'];
                                            var xmlCityCode = xmlCityNodes[k]['-Code'];
                                            citySelectObj.add(new Option(xmlCityName, xmlCityName))
                                        }
                                    }
                                }
                                break
                            }
                        }
                    }
                    form.render(); //刷新select选择框渲染'select', 'city'
                });
                /* countrySelectObj.onchange = function() {
                     stateSelectObj.length = 0;
                     stateSelectObj.add(new Option("--请选择--", ""));
                     if (this.value != "") {
                         for (var i = 0; i < countryList.length; i++) {
                             var xmlCountryCode = countryList[i]['-Code'];
                             if (this.value == xmlCountryCode) {
                                 if (countryList[i]['State']) {
                                     var xmlStateNodes = countryList[i]['State']
                                 } else {
                                     var xmlStateNodes = {}
                                 }
                                 if (typeof xmlStateNodes === 'object' && !isNaN(xmlStateNodes.length)) {
                                     var fStateNodeName = xmlStateNodes[0]['-Name']
                                 } else {
                                     var fStateNodeName = xmlStateNodes['-Name']
                                 }
                                 if (fStateNodeName == null) {
                                     stateSelectObj.length = 0;
                                     stateSelectObj.add(new Option("--", ""));
                                     if (xmlStateNodes['City']) {
                                         var xmlCityNodes = xmlStateNodes['City']
                                     } else {
                                         var xmlCityNodes = {}
                                     }
                                     if (typeof xmlStateNodes === 'object' && !isNaN(xmlStateNodes.length)) {
                                         var fStateNodeName = xmlStateNodes[0]['-Name']
                                     } else {
                                         var fStateNodeName = xmlStateNodes['-Name']
                                     }
                                     citySelectObj.length = 0;
                                     if(xmlCityNodes.length>0){
                                         for (var l = 0; l < xmlCityNodes.length; l++) {
                                             var xmlcityName = xmlCityNodes[l]['-Name'];
                                             var xmlcityCode = xmlCityNodes[l]['-Code'];
                                             citySelectObj.add(new Option(xmlcityName, xmlcityCode))
                                         }
                                     }else{
                                         citySelectObj.add(new Option("--", ""))
                                     }

                                 } else {
                                     for (var j = 0; j < xmlStateNodes.length; j++) {
                                         var xmlStateName = xmlStateNodes[j]['-Name'];
                                         var xmlStateCode = xmlStateNodes[j]['-Code'];
                                         stateSelectObj.add(new Option(xmlStateName, xmlStateCode));
                                         citySelectObj.length = 0
                                         citySelectObj.add(new Option("--请选择--", ""))
                                     }
                                 }
                                 break
                             }
                         }
                     }
                 }
                 stateSelectObj.onchange = function() {
                     console.log('s')
                     citySelectObj.length = 0;
                     citySelectObj.add(new Option("--请选择--", ""));
                     if (this.value != "") {
                         for (var i = 0; i < xmlCountryNodes.length; i++) {
                             var xmlCountryCode = xmlCountryNodes[i]['-Code'];
                             if (countrySelectObj.value == xmlCountryCode) {
                                 var xmlStateNodes = xmlCountryNodes[i]['State'];
                                 for (var j = 0; j < xmlStateNodes.length; j++) {
                                     if (stateSelectObj.value == xmlStateNodes[j]['-Code']) {
                                         var xmlCityNodes = xmlStateNodes[j]['City'];
                                         for (var k = 0; k < xmlCityNodes.length; k++) {
                                             var xmlCityName = xmlCityNodes[k]['-Name'];
                                             var xmlCityCode = xmlCityNodes[k]['-Code'];
                                             citySelectObj.add(new Option(xmlCityName, xmlCityCode))
                                         }
                                     }
                                 }
                                 break
                             }
                         }
                     }
                 }*/
                form.render(); //刷新select选择框渲染
            }

            area_select();
        }
    );
    window.init = function () {
        map = new AMap.Map('map', {
            resizeEnable: true,
            zoom: 10,
        });
        map.plugin(["AMap.ToolBar", 'AMap.Autocomplete', '"AMap.Marker"'], function () {
            map.addControl(new AMap.ToolBar());
            map.addControl(new AMap.Autocomplete({input: "map_search"}));
        });

        map.on("complete", function () {
            console.log("地图加载完成");
        });

        // map.on('click', function(ev) {
        //     // 触发事件的对象
        //     var target = ev.target;
        //     // 触发事件的地理坐标，AMap.LngLat 类型
        //     var lnglat = ev.lnglat;
        //     // 触发事件的像素坐标，AMap.Pixel 类型
        //     var pixel = ev.pixel;
        //     // 触发事件类型
        //     var type = ev.type;
        //     $("#longitude").val(lnglat.lat);
        //     $("#longitude").attr("disabled", "false");
        //     $("#latitude").val(lnglat.lng);
        //     $("#latitude").attr("disabled", "false");
        //     // 构造点标记
        //     map.plugin(["AMap.Marker"], function() {
        //         var marker = new AMap.Marker(
        //             {
        //                 icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        //                 position: [lnglat.lng,lnglat.lat]
        //             }
        //         )
        //         map.add(marker);
        //         map.setFitView();
        //     });
        // });

        //
        $("#map_search").change(function () {
            let val = $(this).val();
            //根据输入地址获取经纬度
            map.plugin(["AMap.Geocoder"], function () {
                var geocoder = new AMap.Geocoder({
                    // city: "010", //城市设为北京，默认：“全国”
                });
                geocoder.getLocation(val, function (status, result) {
                    if (status === 'complete' && result.geocodes.length) {
                        // 构造点标记
                        map.plugin(["AMap.Marker"], function () {
                            var marker = new AMap.Marker(
                                {
                                    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                                    // position: [lnglat.lng,lnglat.lat]
                                }
                            )
                            var lnglat = result.geocodes[0].location
                            marker.setPosition(lnglat);
                            map.add(marker);
                            map.setFitView(marker);
                            $("#longitude").val(lnglat.lng);
                            // $("#longitude").attr("disabled", "false");
                            $("#latitude").val(lnglat.lat);
                            // $("#latitude").attr("disabled", "false");
                        });
                    } else {
                        layer.msg('根据地址查询位置失败', {icon: 2});
                    }
                });
            });
        });
    }

</script>
{/block}